<template>
  <div id="basicLayout">
    <a-layout style="min-height: 100vh; display: flex; flex-direction: column">
      <a-layout-header class="header">
        <global-header></global-header>
      </a-layout-header>
      <a-layout class="main-content" style="flex-grow: 1">
        <global-sider class="sider"></global-sider>
        <a-layout-content class="content">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
      <a-layout-footer class="footer">
        <a href="https://gitee.com/kkwwk/w-picture" target="_blank">w-pricture 云图库</a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalSider from '@/components/GlobalSider.vue'
</script>

<!--padding: 0 50px; 上下方向（顶部和底部）的内边距为 0，而左右方向（左侧和右侧）的内边距为 50px-->
<style scoped>
#basicLayout {
  font-family: 'Arial', sans-serif;
}

#basicLayout .header {
  padding-inline: 20px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

#basicLayout .main-content {
  display: flex;
}

#basicLayout .sider {
  background: #ffffff;
  color: #333;
  transition: all 0.3s ease-in-out;
  border-right: 0.5px solid #eee;
}

#basicLayout :deep(.ant-menu-root) {
  border-bottom: none !important;
  border-inline-end: none !important;
}

#basicLayout .content {
  flex-grow: 1;
  padding: 20px;
  background: #ffffff;
  color: #333;
  transition: all 0.3s ease-in-out;
}

#basicLayout .footer {
  background-color: #f9f9f9;
  text-align: center;
  padding: 16px;
  color: #777;
  border-top: 1px solid #ddd;
}

/* 增加一些响应式样式 */
@media (max-width: 768px) {
  .sider {
    display: none; /* 在小屏幕设备上隐藏侧边栏 */
  }

  .content {
    padding: 20px; /* 减少内边距 */
  }
}
</style>
